Notes

# vscode 插件开发指南

# 插件的能力

  • 主题
    • 界面和文本(TextMate 语法)主题色
    • 图标样式
  • 通用功能
    • 添加命令
    • 添加配置项
    • 添加快捷键
    • 添加菜单项
    • 添加右键菜单
    • 从文本输入框获取输入(QuickPick)
    • 存储数据(localStorage)
  • 工作区扩展
    • 活动栏项目
    • 显示提示框
    • 状态栏信息
    • 显示进度条
    • 打开文件
    • 显示网页(web view)
  • 程序语言
    • 实现新语言的高亮
    • 实现新语言的调试器
    • 代码库管理
    • 定义和执行 Task
    • 定义 snippet

# 生命周期

  • Activation Event：设置插件激活的时机。位于 package.json 中。
  • Contribution Point：设置在 VSCode 中哪些地方添加新功能，也就是这个插件增强了哪些功能。位于 package.json 中。
  • Register：在 extension.ts 中给要写的功能用 vscode.commands.register... 给 Activation Event 或 Contribution Point 中配置的事件绑定方法或者设置监听器。位于入口文件（默认是 extension.ts）的 activate() 函数中。

# packages.json

package 中和插件有关的主要内容是如下几个项目，其中 main 是插件代码的入口文件。

{
    "activationEvents": [
        "onCommand:extension.helloWorld"
    ],
    "main": "./out/extension.js",
    "contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            },
            {
                "command": "extension.helloVscode",
                "title": "Hello vscode"
            }
        ]
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 生成项目

首先利用 npm 全局安装 Yeoman (opens new window) and VS Code Extension Generator (opens new window):

npm install -g yo generator-code
1

接着执行：

yo code
1

按照提示一步步定制化你的项目，一个基本的项目结构就生成了，有点类似 React 的 create-react-app。

# 调试模式

按下 F5，会编译插件并新开一个窗口运行调试模式

←